<template>
    <div class="edit-down-table">
        <vxe-pulldown class="edit-down-pulldown" ref="xDown" transfer>
          <template #default>
            <vxe-input style="width: 40%;"  type="text" :readonly="true" v-model="row[column.property]" @click="clickEvent" ></vxe-input>
          </template>
          <template #dropdown>
            <div class="edit-down-wrapper">
              <avue-slider v-model="row[column.property]" show-input :min="row.progress"></avue-slider>
            </div>
          </template>
        </vxe-pulldown>
    </div>
</template>

<script>

    export default {
        name: 'EditSlider',
        props: {
            params: {
                type: Object,
                default: {row: {}, column: {}}
            },
            textareaOpts: {
                type: Object,
                default: {},
            }
        },
        data() {
            return {
                row: {},
                column: {}
            }
        },
        watch: {
            params: {
                handler(val) {
                    this.row = val.row || {}
                    this.column = val.column || {}
                },
                immediate: true
            }
        },
        mounted() {

        },
        methods: {
          formatPercent(val){
            if(val){
              return val+"%"
            }
            return "0%"
          },
            clickEvent() {
                const $pulldown = this.$refs.xDown;
                $pulldown.showPanel()
            },
        }
    }
</script>

<style lang="scss" scoped>
    .edit-down-pulldown {
        width: 250%;
    }

    .edit-down-wrapper {
        background-color: #fff;
        border: 1px solid #dcdfe6;
        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    }
</style>
